<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
        	<a onclick='onAdd()' class='btn btn-primary'>添加客服</a>
            <div class="card">
                <div class="card-body">
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</div> 

<style>
.control-label {
    padding-top: 7px;
}
.hide{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 9;
    opacity: 0;
}
</style>

<script>
var columns = [{
    field: 'title',
    title: '客服名称'
},{
    field: 'img',
    title: '客服二维码',
    formatter: function(value,item){ // 自定义方法
        return "<img src='"+item.url+"' style='width: 100px;'>";
    }
}, {
    field: 'time',
    title: '在线时间',
    formatter: function(value,item){ // 自定义方法
        return item.starttime+"-"+item.endtime;
    }
}, {
    field: 'operate',
    title: '操作',
    formatter: function(value,item){ // 自定义方法
        let html = '';
        html += '<div class="btn-group">';
            html += '<a class="btn btn-xs btn-default edit-btn" data-toggle="tooltip" title="编辑"><i class="mdi mdi-pencil"></i></a>';
            html += '<a class="btn btn-xs btn-danger del-btn" data-toggle="tooltip" title="删除"><i class="mdi mdi-window-close"></i></a>';
        html += '</div>';
        return html;
    }, 
    events: {
        'click .edit-btn': function (event, value, row, index) {
            event.stopPropagation();
            onAdd(row)
        },
        'click .del-btn': function (event, value, row, index) {
            event.stopPropagation();
            $.confirm({
        		title:'删除客服',
        		content: '确定删除客服？',
                buttons:{
                	confirm:{ 
                		text:'确认',
                		btnClass: "btn-primary",
                		action: function(){
                			showLoading();
        	                $.ajax({
        	                	url:"/SPAdmin/service/del",
        	                	type:'post',
        	                	dataType:'json',
        	                	data:{id:row.id},
        	                	success:function(res){
        	                		hideLoading();
        	                		if(res.code == 1){
        	                			$.notify('删除成功');
                                        $('#table').bootstrapTable('refresh')
        	                		}else $.notify(res.msg);
        	                	}
        	                });
        	            },
                	},
                	cancel:{text:'取消'}
                }
        	});
        },
    }
}];
$('#table').bootstrapTable({
    url: '/SPAdmin/service',
    dataType: 'json',
	method: 'post',
    pagination: true,//开启分页
    pageSize:15,
    pageNumber:1,
    sidePagination:'server',
    search: false, //开启刷选
    columns: columns,
    queryParams:function(params) {
        /******获取分页数据时，这里你可以带上你自定义的参数,bootstrap table会把这些参数合并到请求里******/
       return params;
	}
});

function onAdd(item){
	var str = "<form>";
	if(item && item.id > 0) str += '<input type="hidden" name="sid" value="'+(item ? item.id : '')+'">'
	str += '<div class="input-group" style="margin-bottom: 10px;">'
	str += '<div class="input-group-text">客服名称</div>'
	str += '<input type="text" maxlength="6" class="form-control stitle" name="title" value="'+(item ? item.title : '')+'">'
	str += '</div>'
	str += '<div class="input-group" style="margin-bottom: 10px;">'
	str += '<div class="input-group-text">客服二维码</div>'
    if(item && item.url) str += "<div style='position: relative;'><img class='glogo' style='width: 150px;' src='"+item.url+"'><input type='hidden' name='url' value='"+item.url+"'><input type='file' accept='image/*' class='hide' onchange='onUrl(this,2)' name='url'></div>";
    else str += '<input type="file" class="form-control glogo" onchange="onUrl(this)" name="url">'
	str += '</div>'
	str += '<div class="input-group" style="margin-bottom: 10px;">'
	str += '<div class="input-group-text">在线时间</div>'
	str += '<input type="time" class="form-control timeinput" name="starttime" value="'+(item ? item.starttime : '')+'">'
	str += '<div class="input-group-text">至</div>'
	str += '<input type="time" class="form-control" name="endtime" value="'+(item ? item.endtime : '')+'">'
	str += '</div></form>'
	$.confirm({
		title:'客服信息',
		content: str,
        buttons:{
        	confirm:{ 
        		text:'确认',
        		btnClass: "btn-primary",
        		action: function(){
        			showLoading();
	                $.ajax({
	                	url:"/SPAdmin/service/post",
	                	type:'post',
	                	dataType:'json',
	                	data:this.$content.find('form').serialize(),
	                	success:function(res){
	                		hideLoading();
	                		if(res.code == 1){
	                			$.notify('操作成功');
                                $('#table').bootstrapTable('refresh')
	                		}else $.notify(res.msg);
	                	}
	                });
	            },
        	},
        	cancel:{text:'取消'}
        }
	});
}
function onUrl(obj,type){
	var file = $(obj)[0].files[0];
	if(!file) return;
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function(e) {
		var img = "<div style='position: relative;'><img src='"+this.result+"' width='100px' height='100px'><input type='hidden' name='url' value='"+this.result+"'><input type='file' accept='image/*' class='hide' onchange='onUrl(this,"+type+")' name='url'></div>";
		if(type == 2){
			var po = $(obj).parent();
    		po.prev().after(img);
    		po.remove();
		}else{
    		$(obj).prev().after(img);
    		$(obj).remove();
		}
	}
}
</script>